import React, { useEffect, useState } from "react";
import { Descriptions, Card, Button } from "antd";
import { getHosListDetailRequest } from "@/api/hospital/hospitalList";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import type {
  hospitalDetailReturnType,
  hospitalItemType,
  BookingRuleType,
} from "@/api/hospital/model/hospitalListType";

export default function HospitalShow() {
  const { id } = useParams();
  //定义编程式路由导航
  const navigate = useNavigate()
  //书写一个保存详细信息的状态
  const [detail, setDetail] = useState<hospitalDetailReturnType>({});

  //刚加载组件就发送详情数据请求
  useEffect(() => {
    const getHosDetail = async () => {
      const result = await getHosListDetailRequest(id as string);
      console.log(result);

      //把数据设置给state
      setDetail(result);
    };
    getHosDetail();
  }, []);
  return (
    <Card>
      <Descriptions title="基本信息" bordered column={2}>
        <Descriptions.Item label="医院名称">
          {(detail.hospital as hospitalItemType)?.hosname}
        </Descriptions.Item>
        <Descriptions.Item label="医院logo">
          {(detail.hospital as hospitalItemType)?.logoData ? (
            <img
              width={100}
              src={`data:image/jpeg;base64,${
                (detail.hospital as hospitalItemType)?.logoData
              }`}
              alt=""
            />
          ) : (
            ""
          )}
        </Descriptions.Item>
        <Descriptions.Item label="医院编码">
          {(detail.hospital as hospitalItemType)?.hoscode}
        </Descriptions.Item>
        <Descriptions.Item label="医院地址">
          {(detail.hospital as hospitalItemType)?.param?.fullAddress}
        </Descriptions.Item>
        <Descriptions.Item label="医院坐车路线" span={2}>
          {(detail.hospital as hospitalItemType)?.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院简介" span={2}>
          {(detail.hospital as hospitalItemType)?.intro}
        </Descriptions.Item>
      </Descriptions>

      <Descriptions
        title="预约规则信息"
        bordered
        column={2}
        style={{ marginTop: "30px" }}
      >
        <Descriptions.Item label="预约周期">
          {(detail.bookingRule as BookingRuleType)?.cycle}
        </Descriptions.Item>
        <Descriptions.Item label="放号时间">
          {(detail.bookingRule as BookingRuleType)?.releaseTime}
        </Descriptions.Item>
        <Descriptions.Item label="停挂时间">
          {" "}
          {(detail.bookingRule as BookingRuleType)?.stopTime}
        </Descriptions.Item>
        <Descriptions.Item label="退号时间">
          {" "}
          {(detail.bookingRule as BookingRuleType)?.quitTime}
        </Descriptions.Item>
        <Descriptions.Item label="预约规则" span={2}>
          {(detail.bookingRule as BookingRuleType)?.rule.map((item, index) => {
            return <p key={index}>{item}</p>;
          })}
        </Descriptions.Item>
      </Descriptions>

      <Button style={{ marginTop: "30px" }} onClick={()=>{navigate(-1)}}>返回</Button>
    </Card>
  );
}
